<template>
  <div class="business">
    <div class="business_banner box">
      <div class="business_inner">
        <div class="business_inner_title">
          <h2>招募全国各地区渠道合作商</h2>
          <h2>让出“行”更快捷</h2>
        </div>
      </div>
    </div>
    <div class="business_center main clearfix">
      <div class="business_center_items clearfix">
        <div class="split"></div>
        <h2>贵公司是否有意向入驻呢</h2>
        <h5>请留下联系方式，我们会尽快联系您，提供专人服务</h5>
        <div>
          <el-input placeholder="公司名称"
                    v-model="input"
                    clearable>
          </el-input>
        </div>
        <div>
          <el-input placeholder="联系人姓名"
                    v-model="input"
                    clearable>
          </el-input>
        </div>
        <div>
          <el-input placeholder="联系电话"
                    v-model="input"
                    clearable>
          </el-input>
        </div>
        <div>
          <el-select v-model="cityValue"
                     filterable
                     placeholder="所在城市"
                     :popper-append-to-body="false"
                     class="el-select">
            <el-option v-for="item in cityOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div>
          <el-select v-model="carNumValue"
                     filterable
                     placeholder="可提供的车辆数量"
                     :popper-append-to-body="false"
                     class="el-select">
            <el-option v-for="item in carNumOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </div>
        <a class="submit">提交意向</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'merchantsIn',
  data () {
    return {
      move: 0,
      carNumOptions: [{
        value: '选项1',
        label: '0-10'
      }, {
        value: '选项2',
        label: '10-50'
      }, {
        value: '选项3',
        label: '50-100'
      }, {
        value: '选项4',
        label: '100-200'
      }, {
        value: '选项5',
        label: '200以上'
      }],
      carNumValue: '',
      cityOptions: [{
        value: '选项1',
        label: '上海'
      }, {
        value: '选项2',
        label: '南京'
      }, {
        value: '选项3',
        label: '杭州'
      },
      {
        value: '选项4',
        label: '广州'
      }, {
        value: '选项5',
        label: '深圳'
      }, {
        value: '选项6',
        label: '北京'
      },
      {
        value: '选项7',
        label: '重庆'
      }, {
        value: '选项8',
        label: '南京'
      }, {
        value: '选项9',
        label: '成都'
      },
      {
        value: '选项10',
        label: '长沙'
      }],
      cityValue: '',
      carInfoList: [
        {
          carUrl: '//carphoto.atzuche.com/longRentCarType/2017/8/1506763397642..jpg?x-oss-process=image/resize,lfit,h_219,w_330',
          carH3: '豪华型',
          carPriceRaw: '15000',
          carPriceDiscount: '10000',
          carType: '奥迪A6L、奔驰E级、宝马5系等'
        },
        {
          carUrl: '//carphoto.atzuche.com/longRentCarType/2017/8/1506404160163..jpg?x-oss-process=image/resize,lfit,h_219,w_330',
          carH3: '经济型',
          carPriceRaw: '6000',
          carPriceDiscount: '2700',
          carType: '大众朗逸、丰田卡罗拉、福特福克斯等'
        },
        {
          carUrl: '//carphoto.atzuche.com/longRentCarType/2017/8/1506404896647..jpg?x-oss-process=image/resize,lfit,h_219,w_330',
          carH3: '舒适型',
          carPriceRaw: '9000',
          carPriceDiscount: '5500',
          carType: '大众帕萨特、丰田凯美瑞、本田雅阁等'
        },
        {
          carUrl: '//carphoto.atzuche.com/longRentCarType/2017/8/1506763294252..jpg?x-oss-process=image/resize,lfit,h_219,w_330',
          carH3: 'MPV',
          carPriceRaw: '12000',
          carPriceDiscount: '6500',
          carType: '别克GL8、本田奥德赛、大众途安等'
        },
        {
          carUrl: '//carphoto.atzuche.com/longRentCarType/2017/8/1506763343172..jpg?x-oss-process=image/resize,lfit,h_219,w_330',
          carH3: 'SUV',
          carPriceRaw: '9000',
          carPriceDiscount: '5500',
          carType: '大众途观、丰田RAV4、本田CRV等'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/css/style.css';
.el-select {
  width: 600px;
}
/deep/ .el-input__inner {
  border: 1px solid grey;
  border-radius: 0px;
  height: 68px;
}
//el-input聚焦的时候 外层的border会有一个样式
/deep/ .el-select .el-input.is-focus .el-input__inner {
  border: 1px solid black;
}
/deep/ .el-input {
  margin-bottom: 20px;
  width: 600px;
  margin-left: 200px;
}
/deep/ .selsectbox .el-input--small .el-input__inner {
  height: 100px;
}
//修改总体选项的样式 最外层
/deep/ .el-select-dropdown {
  margin: 0px;
  border: 1px solid black;
  border-radius: 0px;
}
</style>
